<div class="application-dashboard-header-left">
    <button nz-button nzType="primary" 
        (click)="addLine()" [disabled]="!isEditCacheEmpty()">
    新建</button>
</div>
<div class="register-content">
    <nz-table #editRowTable nzBordered  [nzData]="eurekaList" nzShowPagination="false">
        <thead>
            <tr>
                <th scope="code">Code</th>
                <th scope="address">Address</th>
                <th scope="action">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let eureka of eurekaList">
                <td>
                    <ng-container *ngIf="!isEditing(eureka.code); else codeInputTpl">
                        {{ eureka.code }}
                    </ng-container>
                    <ng-template #codeInputTpl>
                        <input type="text" nz-input required
                            [(ngModel)]="lineEditCaches.get(eureka.code).record.code" 
                            #code=ngModel/>
                        <div *ngIf="code.invalid && (code.dirty || code.touched)" class="alert alert-danger">
                            <div *ngIf="code.errors.required">
                                code is required.
                            </div>
                        </div>
                    </ng-template>
                </td>
                <td>
                    <ng-container *ngIf="!isEditing(eureka.code); else addressInputTpl">
                        {{ eureka.address }}
                    </ng-container>
                    <ng-template #addressInputTpl>
                        <input type="text" class="form-control" nz-input required
                            [(ngModel)]="lineEditCaches.get(eureka.code).record.address" 
                            #address="ngModel" [ngModelOptions]="{updateOn: 'blur'}"/>
                        <div *ngIf="address.invalid && (address.dirty || address.touched)" class="alert alert-danger">
                          <div *ngIf="address.errors.required">
                            address is required.
                          </div>
                        </div>
                    </ng-template>
                </td>
                <td>
                    <div class="editable-row-operations">
                        <ng-container *ngIf="!isEditing(eureka.code); else editTpl">
                            <Button nz-button nzSize="small" nzType="danger" ghost 
                                nz-popconfirm nzPopconfirmTitle="Sure to delete?" 
                                (nzOnConfirm)="deleteEureka(eureka)" [disabled]="!isEditCacheEmpty()">
                                delete
                            </Button>
                        </ng-container>
                        <ng-template #editTpl>
                            <Button nz-button nzSize="small" ghost (click)="saveEditLine(eureka)">Save</Button>
                            <Button nz-button nzSize="small" nzType="danger" ghost 
                                nz-popconfirm nzPopconfirmTitle="Sure to cancel?" (nzOnConfirm)="cancelEditLine(eureka)"
                                style="margin-left: 1em;">
                                Cancel
                            </Button>
                        </ng-template>
                    </div>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>